<template>
  <el-dialog :title="deptState" :close-on-click-modal="false" append-to-body :visible.sync="visible"
    @close="clearDataList()" width="90vw" top="5vh">
    <el-container>
      <el-main style="height:70vh;overflow-x: hidden;">

        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="7">
            <div class="boxsty">
              <el-input placeholder="输入关键字进行过滤" v-model="filterText" clearable></el-input>
              <el-tree :data="treeData" ref="tree" :props="defaultProps" :filter-node-method="filterNode"
                class="filter-tree" node-key="id" highlight-current :default-expanded-keys="[1]" accordion
                @node-click="getNodeData" />
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="17">
            <div class="boxsty">
              <div class="tabletext titbottom">已选择部门</div>
              <el-table :data="tableDataDept" stripe>
                <el-table-column prop="deptName" label="部门名称" min-width="350"></el-table-column>
                <el-table-column prop="deptExplain" label="部门全称" min-width="350"></el-table-column>

                <el-table-column fixed="right" label="操作" width="100">
                  <template slot-scope="scope">
                    <el-button @click="handleClick(scope.$index)" type="danger" plain>删除</el-button>

                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" v-if="canSubmit" @click="btnSave">确定</el-button>
      <el-button @click="btnCancel">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import {
    fetchTree,
    getObj,
    getIds
  } from '@/api/admin/dept'

  export default {
    props: {
      //选择的部门
      deptIds: {
        type: Array,
        default: () => []
      },

      //是否多选
      multiple: {
        type: Boolean,
        default: true
      },
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    data() {
      return {
        deptState: '',
        treeData: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        tableDataDept: [],
        visible: false,
        canSubmit: false,
        filterText: "",
        listQuery: {
          name: undefined
        },
      }
    },
    created() {
      this.getList();
    },
    methods: {
      init() {
        if (this.deptIds.length === 0 || this.deptIds[0] !== "") {
          this.deptState = '添加'
        } else {
          this.deptState = '修改'
        }
        if (this.deptIds.length > 0 && this.deptIds[0] !== "") {
          this.$nextTick(() => {
            this.loadTableDataUser(this.deptIds);
          });

        }

        this.visible = true;
        this.canSubmit = true;
      },
      //是否重复
      recordExist(id) {
        let bResult = false;
        this.tableDataDept.find(value => {
          if (id === value.deptId) {
            bResult = true;
          }
        })
        return bResult;
      },
      //单选复选
      setResultList(data, deptDetail) {
        if (this.multiple) { //多选
          for (var i = 0; i < this.tableDataDept.length; i++) {
            if (this.tableDataDept[i].deptId == data.id) {
              return;
            }
          }
          this.tableDataDept.push({
            deptId: data.id,
            deptName: data.name,
            deptExplain: deptDetail.deptName,
            deptCode: deptDetail.deptCode,
            parentId: deptDetail.parentId,
            deptLeaderId:deptDetail.deptLeaderId,
            deptLeaderName:deptDetail.deptLeaderName,
            //需要返回什么参数，这里填写
          })
        } else { //单选
          this.tableDataDept = [];
          this.tableDataDept.push({
            deptId: data.id,
            deptName: data.name,
            deptExplain: deptDetail.deptName,
            deptCode: deptDetail.deptCode,
            parentId: deptDetail.parentId
            //需要返回什么参数，这里填写
          })
        }
      },
      // 节点单击
      getNodeData(data) {
        getObj(data.id)
          .then(res => {
            const deptDetail = res.data.data;
            this.setResultList(data, deptDetail);
          })
          .catch(err => {
          })
      },
      //筛选节点
      filterNode(value, data) {
        if (!value) return true
        return data.name.indexOf(value) !== -1
      },
      //取得左侧tree记录
      getList() {
        fetchTree(this.listQuery).then(response => {
          this.treeData = response.data.data
        })
      },
      //单击删除
      handleClick(index) {
        this.tableDataDept.splice(index, 1);
      },
      //清空记录
      clearDataList() {
        this.tableDataDept = [];
      },
      //取消按钮
      btnCancel() {
        this.visible = false;
        this.clearDataList();
      },

      //===================================
      //调用页面需要传过来的数组
      loadTableDataUser(ids) {
        getIds(ids).then(data => {
          var obj = data.data.data;
          if (obj) {
            for (var i = 0; i < obj.length; i++) {
              this.tableDataDept.push({
                deptId: obj[i].deptId,
                deptCode: obj[i].deptCode,
                deptName: obj[i].name,
                parentId: obj[i].parentId,
                //需要返回什么参数，这里填写
                deptExplain: obj[i].deptName
              });
            }
          }
        }).catch(() => {
          this.$notify.error('数据错误')
        });
      },

      //保存部门
      btnSave() {
        this.canSubmit = false;
        this.canSubmit = true;
        // this.$notify.success('保存成功');
        this.visible = false;
        this.$emit('returnDeptList', this.tableDataDept);
      },

    }
  }

</script>

<style scoped>

</style>
